<template>
    <div>
      <div class="pl">
        <div class="img">
          <img :src="item.aut_photo" alt="" />
        </div>
        <div class="text">
          <div class="pl-top">
            <div class="names">{{ item.aut_name }}</div>
            <div
              class="iconfont icon-dianzan2"
              :class="{ active: flag }"
              @click="dz"
            >
              赞
            </div>
          </div>
          <p class="pl-pl">{{ item.content }}</p>
          <div class="pl-bottom">
            <span class="time">{{ times(item) }}</span>
            <span class="huifu" @click="$emit('ss', item)"
              >回复{{ item.reply_count }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import dayjs from '@/utils/dayjs'
  import { notlikeArticleAPI, likeArticleAPI } from '@/api'
  export default {
    props: ['arr', 'item'],
    computed: {
      times() {
        return (item) => {
          return dayjs(item.pubdate).fromNow()
        }
      }
    },
    data() {
      return {
        flag: this.item.is_liking
      }
    },
    methods: {
      async dz() {
        if (this.flag) {
          await notlikeArticleAPI(this.item.com_id)
          this.flag = false
        } else {
          await likeArticleAPI(this.item.com_id)
          this.flag = true
        }
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .pl {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    img {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .text {
      flex: 1;
      .pl-top {
        display: flex;
        justify-content: space-between;
        .names {
          font-size: 14px;
          color: #466498;
        }
      }
      .pl-pl {
        font-size: 0.42667rem;
        color: #222;
        word-break: break-all;
        text-align: justify;
      }
      .pl-bottom {
        .time {
          font-size: 0.25333rem;
          color: #222;
          margin-right: 0.33333rem;
        }
        .huifu {
          width: 1.8rem;
          height: 0.64rem;
          line-height: 0.64rem;
          font-size: 0.28rem;
          color: #222;
          border: 0.02667rem solid #ebedf0;
          padding: 5px 15px;
          border-radius: 25px;
        }
      }
    }
  }
  .active {
    color: red;
  }
  </style>